<template>
  <div class="breadcrumb">
    <router-link to="/">首页</router-link>
    <template v-for="breadcrumb in breadcrumbs">
      <span>/</span> <span>{{ breadcrumb }}</span>
    </template>
  </div>
</template>

<script>
export default {
  computed: {
    breadcrumbs() {
      let route = this.$route;
      let breadcrumbs = [];
      while (route) {
        if (route.meta && route.meta.breadcrumb) {
          breadcrumbs.unshift(route.meta.breadcrumb);
        }
        route = route.redirectedFrom || route.parent;
      }
      return breadcrumbs;
    },
  },
}
</script>

<style scoped>
.breadcrumb {
  font-size: 14px;
  color: #333;
}
.breadcrumb a {
  color: #409EFF;
  text-decoration: none;
}
</style>